<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 8]><script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.pie.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/example/ui/pie/pieDemo.js" />
<div id="pieTab">
	<div title="API">
		<div>
		   <samp><h2>ops.pies饼图设置：</h2></samp> 
		   <div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">		
				<ul>
				<li class="ccay-form-row">
					<samp><h3>初始化属性</h3></samp> 
			    	<span class="ccay-form-input">
			    		<h3>描述</h3> 
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>show: boolean</samp> 
			    	<span class="ccay-form-input">
			    		   是否显示
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>radius</samp> 
			    	<span class="ccay-form-input">饼图半径，默认自动计算</span>
				</li>
				<li class="ccay-form-row">
					<samp>tilt</samp> 
			    	<span class="ccay-form-input">倾斜库，0-1</span>
				</li>
				<li class="ccay-form-row">
					<samp>label：{}</samp> 
			    	<span class="ccay-form-input">标题设置
					</span>
				</li>
				<li class="ccay-form-row">
					<samp>label.show</samp> 
			    	<span class="ccay-form-input">是否显示标题</span>
				</li>
				<li class="ccay-form-row">
					<samp>label.formatter</samp> 
			    	<span class="ccay-form-input">
			    	 function，自定义label输出，formatter(label,slice),label定义的line的label，slice信息<br>
				    	function(label, slice){
    							 return '<div style="color:'+slice.color+';">' +label+Math.round(slice.percent)+'%</div>';
    						}
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>label.radius</samp> 
			    	<span class="ccay-form-input">针对饼图半径的位置，0-1</span>
				</li>
				<li class="ccay-form-row">
					<samp>label.threshold</samp> 
			    	<span class="ccay-form-input">显示百分比的限制，比如,threshold：0.5只会显示50%以上区域的label   </span>
				</li>
				<li class="ccay-form-row">
					<samp>combine:{}</samp> 
			    	<span class="ccay-form-input">显示Other的设置 </span>
				</li>
				<li class="ccay-form-row">
					<samp>combine.color</samp> 
			    	<span class="ccay-form-input">其他区域的背景色 </span>
				</li>
				<li class="ccay-form-row">
					<samp>combine.threshold</samp> 
			    	<span class="ccay-form-input">显示为其他区域的百分比，低于改设置区域的合并到其他区域 </span>
				</li>	
				</ul>
			</div>
			</form>
		   </div>
		   <samp><h2>ops.lines属性说明：</h2></samp>
		   <div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">		
				<ul>
				<li class="ccay-form-row">
					<samp><h3>初始化属性</h3></samp> 
			    	<span class="ccay-form-input">
			    		<h3>描述</h3> 
			    	</span>
				</li>
				<li class="ccay-form-row">
					<samp>totalField:string</samp> 
			    	<span class="ccay-form-input">求合计的字段，type='pie'中有效 </span>
				</li>
				<li class="ccay-form-row">
					<samp>fnSetData: function</samp> 
			    	<span class="ccay-form-input">ajax方式返回的数据中自定义数据方法，fnSetData(item)，item数据项 <br>
			    	 fnSetData:function(item){
					 return [item.month,item.income -item.profit]
					 }</span>
				</li>
				<li class="ccay-form-row">
					<samp>combine.threshold</samp> 
				    <span class="ccay-form-input">显示为其他区域的百分比，低于改设置区域的合并到其他区域 </span>
				</li>
				 </ul>
			  </div>
			</form>
		  </div>
		</div>
		
	</div>
	
	<div title="饼图">
		<h4><span>饼图</span></h4>
		<div id=chart></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>饼图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
$('#chart11').chart({
	type:'pie',
		lines:[{label: '月度销售额',totalField:'profit'},
	       {label: '月度支出',totalField:true,fnSetData:function(item){
	    	   return item.total - item.profit;
	       }}
	],
	ajax:{
		url:'ccay/example/ui/chart/datas2.json'
	} 
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#pieTab',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="设置字段模式">
		<h4><span>饼图  属性配置</span></h4>
		<div id=chart2></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>饼图  属性配置&lt;/span>&lt;/h4>
&lt;div id=chart22>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
$('#chart22').chart({
	type:'pie',
	lines:[{label: '<span>月度销售额</span><span>${percent}%</span>',totalField:'profit'},
	       {label: '<span>月度支出</span><span>${percent}%</span>',totalField:true,fnSetData:function(item){
	    	   return item.total - item.profit;
	       }}
	],
	linesOp:{
		/**
		 * 倾斜库，0-1
		 */
		 tilt: 0.5
	},
	grid:{
		/**
		 * 允许监听鼠标点击事件
		 */
		hoverable:true
	},
	ajax:{
	    /**
	     * 路径是前面是包名，后面的datas2.json是包下面的类。
	     */
		url:'ccay/example/ui/chart/datas2.json'
	} 
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#pieTab',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>

